<template>
  <div class="app-container">
    <el-row :gutter="15">
      <!--搜索-->
      <el-col :span="5" :xs="24" style="color: #FFFFFF">
        <div class="container">
          <div style="padding: 10px;">
            <div class="head-container">
              <el-input
                  v-model="queryList.keyWords"
                  placeholder="请输入设备编号"
                  clearable
                  size="small"
                  prefix-icon="el-icon-search"
                  style="margin-bottom: 10px;"
                  @clear="onClear"
                  @input="onBlur"
              />
              <hr>
            </div>
            <div style="margin-top: 10px;overflow-y: scroll;width: 100%;height: 85vh; line-height: 25px;">
              <div style="background: #00484D; cursor: pointer; margin-bottom: 5px;font-size:14px;display: flex;justify-content: space-between;align-items: center;padding: 3px;" v-for="(item, i) in deviceList" :key="i" @click="seacherId(item.deviceId)">
                <div>{{item.deviceName}}({{item.deviceId}})</div>
                <div :class="[item.status == '在线'? 'status0' :item.status == '离线'? 'status1' : 'status2' ]">{{item.status}}</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <!--       右侧-->
      <el-col :span="19" :xs="24">
        <div class="container">
          <!-- 搜索 -->
          <el-row style="margin-left: 20px;padding-top: 10px;">
            <el-col :span="24" :xs="24">
              <Search
                  :search-data="searchData"
                  :search-params="queryParams"
                  @change="searchParamsUpdate"
              >
              </Search>
            </el-col>
          </el-row>
          <!--      表格-->
          <el-table
              :data="tableData"
              height="88vh"
              style="width: 100%;background: #002127;border-radius: 10px;"
              :cell-style="{backgroundColor: '#002127',color: '#ffffff',}"
              :header-cell-style="{ backgroundColor: '#00484D',textAlign: 'center',fontWeight: 'bold',color: '#ffffff',borderBottom: '1px solid #00484D' }">
            <el-table-column prop="deviceIndustryName" label="现场设备名称" align="center"></el-table-column>
            <el-table-column prop="deviceIndustryType" label="现场设备类型" align="center"></el-table-column>
            <el-table-column prop="channel" label="通道名称" align="center"></el-table-column>
            <el-table-column label="值" align="center">
              <template slot-scope="scope" >
                <div>{{scope.row.value}}{{scope.row.unit}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="alarmType" label="告警" align="center">
              <template slot-scope="scope" >
                <div v-if="scope.row.alarmType == null" style="width: 10px;height: 10px;border-radius: 50%;background:#978e8e;margin: 0 auto;"></div>
                <div v-else style="width: 10px;height: 10px;border-radius: 50%;background:#FF1818;margin: 0 auto;"></div>
              </template>
            </el-table-column>
            <el-table-column prop="alarmType" label="告警类型" align="center"></el-table-column>
            <el-table-column prop="setUpValue" label="告警界限" align="center"></el-table-column>
            <el-table-column prop="time" label="上报时间" align="center" width="200" show-overflow-tooltip sortable></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                    style="border: 1px solid rgba(0,231,231,0.4);background: rgba(0,231,231,0.051);color: #ffffff;"
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">历史数据</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getActualDevice, getActualRuleInfo } from '@/api/automation'
import Search from '@/components/PageSearch'
export default {
  name: "actuallists",
  components: { Search },
  data() {
    return {
      queryList:{keyWords: ''},
      deviceList: [],
      celist: [],
      searchData: [
        {
          type: 'input',
          label: '通道名称',
          prop: 'keyWords2',
          placeholder: '请输入通道名称筛选'
        }
      ],
      queryParams: {keyWords: '',keyWords2:''},
      // 表格
      tableData: [],
    }
  },
  props: {},
  watch: {},
  created() {
    this.getDevice()
  },
  mounted() {
  },
  methods: {
    // 传输设备
    getDevice() {
      getActualDevice(this.queryList).then((res) => {
        console.log(res)
        this.deviceList = res.data
        this.celist = res.data
        res.data.map(item => {
          if (item.status === 0) {
            item.status = '未激活'
          } else if (item.status === 1) {
            item.status = '在线'
          } else if (item.status === 2) {
            item.status = '离线'
          }
        })
      }).catch((err) => {
        console.log(err)
        // this.$message.error(err.errorMsg)
      })
    },
    // 搜索框获取失去焦点触发
    onBlur(){
      this.getDevice()
    },
    // 清空搜索框
    onClear() {
      // this.deviceList = this.celist
    },
    // 点击左边列表某一条数据
    seacherId(id) {
      console.log(id)
      this.queryParams.keyWords = id
    },
    // 通道
    getList() {
      getActualRuleInfo(this.queryParams).then((res) => {
        console.log(res)
        this.tableData = res.data || []
        res.data.map(item => {
          if (item.alarmType === 1) {
            item.alarmType = '上限'
          } else if (item.alarmType === 2) {
            item.alarmType = '下限'
          }
          if (item.deviceIndustryType === 1) {
            item.deviceIndustryType = '泵'
          } else if (item.deviceIndustryType === 2) {
            item.deviceIndustryType = '水池'
          } else if (item.deviceIndustryType === 3) {
            item.deviceIndustryType = '电表'
          } else if (item.deviceIndustryType === 4) {
            item.deviceIndustryType = '压力表'
          } else if (item.deviceIndustryType === 5) {
            item.deviceIndustryType = '流量计'
          } else if (item.deviceIndustryType === 6) {
            item.deviceIndustryType = '阀门'
          } else if (item.deviceIndustryType === 7) {
            item.deviceIndustryType = '电能'
          }
        })
      }).catch((err) => {
        console.log(err)
        // this.$message.error(err.errorMsg)
      })
    },
    // 历史数据
    handleEdit(index, row) {
      console.log(index,row)
      // console.log(this.queryParams.keyWords)
      // console.log(row.channelId)
      this.$router.push({
        path: './history',
        query: {
          deviceId: this.queryParams.keyWords,
          channelId: row.channelId
        }
      })
    },
    searchParamsUpdate() {
      this.getList()
    }
  }
}
</script>

<style lang='less' scoped>
.app-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #0C323A;
  .container {
    width: 100%;
    height: 100%;
    background: #002127;
    border-radius: 10px;
  }
}
// 表格设置鼠标经过时背景颜色
::v-deep.el-table tbody tr:hover>td{
  background-color: #02565c !important;
}
//表格改变每行底边框颜色
::v-deep.el-table  td, .el-table th.is-leaf  {
  border-bottom:  1px solid rgba(0,231,231,0.302)!important;
}
/*table边框颜色*/
.el-table--border:after,
.el-table--group:after,
.el-table:before {
  background-color: #002127;
}
.status0 {
  color: #1EFF00;
}
.status1 {
  color: #FF1818;
}
.status2 {
  color: #FFFFFF;
}
</style>
